<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入外部资源 -->
    <link rel="stylesheet" href="./index.css">
    <!-- 引入JavaScript脚本 -->
    <script src="./vue.js"></script>
    <script defer src="./index.js"></script>
     
</head>
<body>
    <!-- 使用的vue3 -->
    <div id="app">
        <h1>Drop the beat</h1>
        <div id="controls">
            <div>
                Tempo:<input type="number" min="1" max="500" v-model="bpm">bpm
            </div>
            <div>
                <!-- 开始按钮 -->
                <button @click="start">Play</button>
                <!-- 暂停按钮 -->
                <button @click="pause">Pause</button>
                <!-- 清除按钮 -->
                <button @click="clear">Clear</button>
            </div>
        </div>

        <!-- 表格结构 -->
        <table id="board">
            <tr>
                <td></td>
                <!-- 循环生成4个单元格，每个单元跨越4列 -->
                <td v-for="i in 4" colspan="4">{{i}}</td>
            </tr>
            <!-- 外部循环 -->
             <!-- 为每种音效创建一行 -->
            <tr v-for="effect in sounds">
                <!-- 第一个单元格显示音效名称 -->
                <td>{{effect.title}}</td>
                <!-- 内部循环 -->
                 <!-- 为每一行创建16个单元格（节拍） ，:class动态绑定-->
                  <!--点击时调用toggleEffect方法切换该位置的状态（开启 / 关闭音效）  -->
                <td v-for="i in 16" class="key" :class="{active:effect.bit[i-1]}"
                @click="toggleEffect(effect,i-1)"></td>
            </tr>
            <!-- 当前节拍指示器 -->
            <tr>
                <td></td>
                <!--  当curBeat等于当前节拍索引时，添加active类（高亮显示当前播放位置）-->
                <td v-for="i in 16" :class="{active:curBeat === (i-1)}">{{i}}</td>
            </tr>
        </table>



    </div>
</body>
</html>